<template>
    <div class="registration">
        <nut-popup  round position="bottom" :style="{ height: '60%' }" v-model:visible="state.isVisible">
            <div class="registration_custom_content">
                <nut-input clearable v-model="registrationInfo.mobile" placeholder="请输入手机号" max-length="11">
                    <template #left>
                        <nut-button style="border:none" size="mini" type="default">+86 |</nut-button>
                    </template>
                </nut-input>
                <nut-input  v-model="registrationInfo.code" placeholder="请输入验证码">
                    <template #right>
                        <nut-button @click="getCode" style="border:none" :style="mobileVerify?'color:blue':'color:#999'" size="mini"
                            type="default" :disabled="!mobileVerify" v-if="codeTimeLimit===0">获取验证码</nut-button>
                      <nut-button style="border:none;color:blue" size="mini" v-if="codeTimeLimit>0"
                                  type="default">{{codeTimeLimit}}s后重新获取</nut-button>
                    </template>
                </nut-input>
                <nut-button color="#0966ff" type="info" @click="submit" class="registration_login" :disabled="loginDisabled">登 录</nut-button>
                <div class="registration_tip">未注册用户登录默认注册盛辉会员</div>
            </div>
        </nut-popup>
    </div>
</template>

<script setup lang="ts">
import { defineComponent, getCurrentInstance, onUnmounted, ref, reactive, computed } from 'vue';
import { doLoginByPhone, getVerificationCode } from '@/@api/login'
import Taro from '@tarojs/taro'
import useUserInfoStore from "@/store/user";

const userStore = useUserInfoStore()
// const isVisible = ref<boolean>(false)
const props = defineProps<{
    state: {
        isVisible: boolean
    }
}>()
const emit = defineEmits<{
    (e: 'registrationBtn', args: typeof registrationInfo)
}>()
const registrationInfo = reactive<{
    mobile: string
    code: string

}>({
    mobile: '',
    code: ''
})

const mobileVerify = computed(() => {
  return /^1(3|4|5|6|7|8|9)\d{9}$/.test(registrationInfo.mobile);
});
const codeTimeLimit = ref(0)
const codeTimer = ref(null)
const loginDisabled = ref(false)

const getCode = () => {
    let params = {
        phone: registrationInfo.mobile
    }
    codeTimeOutStart()
    getVerificationCode(params)

}
const submit = () => {
  if(!mobileVerify){
    Taro.showToast({
      icon: 'none',
      title: '请输入正确的手机号'
    })
    return
  }
  if(!mobileVerify){
    Taro.showToast({
      icon: 'none',
      title: '请输入正确的手机号'
    })
    return
  }
  if(!registrationInfo.code){
    Taro.showToast({
      title: '请输入验证码'
    })
    return
  }
  loginDisabled.value = true
  doLoginByPhone({
    phone: registrationInfo.mobile,
    verify: registrationInfo.code
  }).then((result:any)=>{
    loginDisabled.value = false
    if(result.code === 200){
      Taro.setStorageSync('openid', result.data.customerInfo.openid || '')
      userStore.setOpenid(result.data.customerInfo.openid || '')
      Taro.setStorageSync('userToken', result.data.token)
      userStore.setToken(result.data.token)
      let userInfoData = {
        ...result.data.customerInfo,
      }
      Taro.setStorageSync('userInfo', JSON.stringify(userInfoData))
      userStore.setUserInfo()
      Taro.showToast({
        icon: 'success',
        title: '登录成功',
        duration: 1000,
        success: ()=>{
          setTimeout(()=>{
            Taro.reLaunch({
              url: "/pages/index/index",
            })
          },1000)
        }
      })
    }
  }).catch((err)=>{
    loginDisabled.value = false
  })

    // const body = {
    //     tel: registrationInfo.mobile,
    //     mobile: registrationInfo.mobile,
    //     code: registrationInfo.code,
    //     openid: '',
    //     nickname: '',
    // }
    // Taro.login({
    //     success: (res) => {
    //         console.log(res, 56);
    //         getLogon({ code: res.code }, body)
    //
    //     }
    // })
}
function codeTimeOutStart() {
  codeTimeLimit.value = 60
  if(!codeTimer.value){
    clearInterval(codeTimer.value)
  }
  codeTimer.value = setInterval(()=>{
    codeTimeLimit.value--
    if(codeTimeLimit.value === 0){
      clearInterval(codeTimer.value)
    }
  },1000)
}

onUnmounted(()=>{
  codeTimer.value = null
})
</script>

<style lang="scss" >
// @import "xxx";
// @import url(xxx);
.registration {

    .registration_custom_content {
        padding: 50rpx 50rpx;

    }

    .registration_login {
        width: 650rpx;
        height: 88rpx;
        line-height: 88rpx;
        text-align: center;
        background-color: #0966FF;
        margin: 96rpx auto 0;
        border-radius: 88rpx;
        color: #FFFFFF;
    }

    .registration_tip {
        color: #999999;
        font-size: 28rpx;

        text-align: center;
        margin-top: 48rpx;
    }
}
</style>
